import React, { useEffect, useRef } from 'react';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts/lib/echarts';
import * as THREE from 'three';
import './index.scss'
export default function Index() {
  const sceneRef = useRef(null);
  let frameId;
  useEffect(() => {
    init()
    return () => {
      if (frameId !== undefined) {
        cancelAnimationFrame(frameId);
      }
    }
  })
  const init = () => {
    const scene = new THREE.Scene()
    console.log(scene, "init1111")
    const camera = new THREE.PerspectiveCamera(65, (window.innerWidth /2) / (window.innerHeight /2), 0.5, 1000)
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize((window.innerWidth /1.3), (window.innerHeight /1.4));
    sceneRef.current.appendChild(renderer.domElement)

    // const geometry = new THREE.BoxGeometry(1, 1, 1);
    // const geometry =  new THREE.SphereGeometry(3,2,2)
    // const geometry = new THREE.CylinderGeometry(5,5, 10, 2.5);
    // var geometry = new THREE.OctahedronGeometry(2);
    // var geometry = new THREE.DodecahedronGeometry(2);
    // var geometry = new THREE.IcosahedronGeometry(2);


    // 遍历几何体的face属性
    // geometry.faces.forEach(face => {
    //   // 设置三角面face三个顶点的颜色
    //   face.vertexColors = [
    //     new THREE.Color(0xffff00),
    //     new THREE.Color(0xff00ff),
    //     new THREE.Color(0x00ffff),
    //   ]
    // });
    // const material = new THREE.MeshBasicMaterial({
    //   // color: 0x00ff00
    //   // vertexColors: THREE.FaceColors,
    //   color: 0x0000ff,
    //   // side: THREE.DoubleSide,
    // });
    // const cube = new THREE.Mesh(geometry, material);
    


    // var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    // // 点渲染模式
    // var material = new THREE.PointsMaterial({
    //   color: 0xff0000,
    //   size: 5.0 //点对象像素尺寸
    // }); //材质对象
    // var cube = new THREE.Points(geometry, material);



    // var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    // // 线条渲染模式
    // var material = new THREE.LineBasicMaterial({
    //   color: 0xff0000 //线条颜色
    // });//材质对象
    // // 创建线模型对象   构造函数：Line、LineLoop、LineSegments
    // var cube = new THREE.Line(geometry, material);



    var geometry = new THREE.BoxGeometry(1, 1,1);
    // 三角形面渲染模式  
    // var material = new THREE.MeshLambertMaterial({
    //   color: 0x0000ff, //三角面颜色
    //   wireframe: true,//网格模型以线条的模式渲染
    // }); //材质对象
    // material.wireframe = true;

    var material = new THREE.PointsMaterial({
      color: 0xff0000,
      wireframe: true,
      // size: 5.0 //点对象像素尺寸
    });
    var cube = new THREE.Mesh(geometry, material); 

    scene.add(cube);
    camera.position.z = 5; //位置，没有具体的位置不显示
    const animate = () => {
      frameId = requestAnimationFrame(animate)
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate()
  }

  return (
    <div ref={sceneRef} />
  );
}
